<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <link rel="shortcut icon" type="image/x-icon" href="http://blog.danielfariati.com/wp-content/uploads/2011/08/favicon.png"/>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <title>PASTEIS</title>
    </h:head>
    <h:body>
        <h:form>
            <div align="center" style="margin: 0 auto">
                <h1>Pastel - Pedido</h1>

                <div align="center" style="margin: 0 auto">
                    <h:graphicImage alt="Pastel"  url="Pastel-Animado.gif" width="227px" height="234" style="position: absolute; margin-top: -50px; margin-left: 100px;"/>
                </div>

                <div style="margin-top: 20px; margin-bottom: 20px;">
                    <strong style="margin-right: 5px;">Cliente:</strong>
                    <h:inputText value="#{bean.cliente}"></h:inputText>
                </div>

                <div style="margin-bottom: 20px;">
                    <strong>Tipo:</strong>
                    <h:selectOneRadio value="#{bean.escolhaTipo}">
                        <f:selectItems value="#{bean.tipos}"/>
                    </h:selectOneRadio>
                </div>

                <div>
                    <strong>Você conheceu o pastel:</strong>
                </div>
                <div style="margin-bottom: 20px;">
                    <h:selectManyCheckbox  layout="pageDirection" value="#{bean.escolhaPasteis}">
                        <f:selectItems value="#{bean.pasteis}"/>
                    </h:selectManyCheckbox>
                </div>

                <div style="margin-bottom: 10px;">
                    <strong>Sabor (múltiplos):</strong>
                </div>
                
                <div style="margin-bottom: 10px;">
                     <h:selectManyListbox value="${bean.escolhaSabores}">
                        <f:selectItems value="#{bean.sabores}"/>
                    </h:selectManyListbox>
                </div>

                <div id="Tabela" align="center" style="margin: 0 auto; position: absolute; margin-top: -400px; margin-left: 100px; border: solid 1px #ff0000">
                    <strong>Preços:</strong>
                    <h:dataTable var="pastel" value="#{bean.listaPastel}">
                        <h:column>
                            <f:facet name="header">
                                Sabor
                            </f:facet>
                            #{pastel.sabor}
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                Preço
                            </f:facet>
                            R$#{pastel.preco}
                        </h:column>
                    </h:dataTable>
                </div>

                <div>
                    <h:commandButton value="Ok" action="#{bean.verificarForm}" style="float: none;"/>
                    <h:commandButton value="Limpar" action="#{bean.limpar}" style="float:none; margin-left:10px;"/>
                </div>

            </div>

        </h:form>
    </h:body>
</html>